<template>
  <div style="padding-bottom: 1.5rem;" >
    <headNav title="审核列表" ></headNav>
    <!-- 底部tab模块 -->
    <div class="flexAlign bottomTab"  >
      <div @click.prevent="checklistChange" class="allCss" >
        <checklist title="" required :options="commonList" v-model="checklistVal"  class="imgG" ></checklist>
      </div>


      <button type="default" @click="batchClick(1)" :disabled="whetherData" >批量通过</button>
      <button type="default" @click="batchClick(2)" :disabled="whetherData" class="buttonTab" >批量驳回</button>
    </div>
    <!-- 列表模块 -->
    <div class="bigDivCss" :class="{disableCss: val.disabled}" @click="listClick(val)"
     v-for="(val, index) in trialList" :key="index" >
      <img src="@/assets/img/my/squareTick.png" mode="" class="tickCss" v-if="val.disabled" >
      <div class="headImgCss" >
        <img v-if="!val.faceImgUrl" src="@/assets/img/default_heads.png" mode="" >
        <img v-else :src="val.faceImgUrl" mode="" >
      </div>
      <div class="flexHeight middleDivCss " >
        <span class="nameCss" >学生: {{val.studentName}}</span>
        <span>家长称呼: {{val.parentCall}}</span>
        <span style="margin: 0.1rem 0;" v-if="i.valCode == val.relationCode"
        v-for="(i, j) in relativesArr" :key="j" >
          亲属关系: {{i.valName}}
        </span>
        <span>手机号: {{val.loginName}}</span>
      </div>
      <div class="flexHeight rightDivCss" >
        <button type="default" @click.stop="singleTrialClick(1, val)" >通过</button>
        <button type="default" @click.stop="singleTrialClick(2, val)" class="buttonCss" >驳回</button>
        <span @click.stop="detailsClick(val)" >详情 ></span>
      </div>
    </div>
    <!-- 无记录展示 -->
    <div class="flexCenter whetherCss" v-if="whetherData" >
      <span>------  暂无审核数据 ------</span>
    </div>

    <!-- 学生重名弹窗 -->
    <x-dialog v-model="showHideOnBlur" class="dialog-demo xdialog" >     <div class="flexHeight popupCss" style="overflow: scroll; max-height: 14rem; " >
        <span style="margin: 0.4rem 0;" >请选择是哪位学生</span>
        <div class="flexHeight stripCss" v-for="(val, index) in conflictList" :key="index"
        :class="{borderCss: num.id == val.id }" @click="num = val" >
          <img src="@/assets/img/my/yesBlue.png" mode="" v-if="num == val" >
          <span class="nameCss" >学生姓名：{{val.studentName}}</span>
          <span>学籍号：{{val.studentCode}}</span>
          <span>证件号：{{val.idNumber}}</span>
          <span>家长手机：{{val.parentPhone}}</span>
        </div>
        <div class="flexCenter" >
          <button type="default" @click="doubleNameClick()" >确定</button>
          <button type="default" style="margin-left: 0.3rem;" @click="showHideOnBlur = false" >关闭</button>
        </div>
     </div>
    </x-dialog>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Checklist, XDialog } from 'vux'
import { getTrialStudentApi, getDictionariesApi, postBatchTrialApi, postSingleTrialApi } from '@/api/myNewApi'
import {addFaceResource} from '@/api/faceApi'

export default {
  components: {
    headNav,
    Checklist,
    XDialog
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      loginUserId: state => state.user.loginUserId
    })
  },
  data () {
    return {
      whetherData: false,  // 没有审核数据时为true
      relativesArr: '',  // 亲属枚举数组
      trialList: [],  // 审核列表
      num: '',     // 冲突选中的条目
      showHideOnBlur: false,
      checklistVal: [],   // 是否选中全选
      commonList: [ '全选' ],
      hookList: [],  // 用户勾选的条
      conflictList: []  // 冲突的数组
    }
  },
  methods: {
    // 重名弹窗确定事件
    async doubleNameClick () {
      if (!this.num) {
        this.$vux.toast.text('请选择至少一个学生', 'middle')
        return
      }
      let params = {
        studentApprovalId: this.studentApproval,
        status: this.statu,
        checkedStudentId: this.num.studentId,
        isNewStudent: false
      }
      await postSingleTrialApi(params)
      this.packTrialList()
      this.showHideOnBlur = false
      this.$vux.toast.text('操作成功', 'middle')
    },

    async addFaceResource (val) {

        if (!val.faceImgUrl || !val.studentId) {
          return
        }



        var person = {
          externalFields: {
            externalFields: {
                    schoolId: val.schoolId,
                    className: '',
                    personId: val.studentId,

                    name: '',
                    faceImgUrl: '',
                    gender: val.gender ? 1 : 0,
                    personType: 1   // 教师：0，学生：1
            }
          },
          faceSetName: val.schoolId,
          personName: val.studentName,
          imageUrl: val.faceImgUrl,
           living: true
        }
        let res = await addFaceResource(person)

        if (res.status != 200) {
          this.$vux.alert.show({
              title: '错误',
              content: res.msg,
          })

        }
    },

    async batchUploadFace (studentList) {

      for(let s of studentList) {
        for(let h of this.hookList) {
          if(s.studentApprovalId == h.id && s.studentId) {
              h.studentId = s.studentId
              await this.addFaceResource(h)
          }
        }
      }
    },

    // 单条操作按钮触发事件
    async singleTrialClick (e, val) {
      this.num = ''
      this.conflictList = []
      this.studentApproval = val.id
      this.statu = e
      let params = {
        studentApprovalId: val.id,
        status: e,
        checkedStudentId: '',
        isNewStudent: false
      }
      this.$vux.confirm.show({
          title: '提示',
          content: '是否确定执行该操作？',
          onConfirm : async () => {
            // ——————————————————————————————————————————
            let res = await postSingleTrialApi(params)
            if (res.isSuccess) {
              await this.packTrialList()

              val.studentId = res.studentId
              await this.addFaceResource(val)
              this.$vux.toast.text('操作成功', 'middle')

            } else {
              // ——————————————————————————————————————————
              this.$vux.confirm.show({
                  title: '提示',
                  content: '该学生已有同名，是否为同一学生？',
                  confirmText: '是',
                 cancelText: '否',
                  onConfirm : async () => {
                    this.showHideOnBlur = true
                    for (let checking of res.checkingStudents) {
                      this.conflictList.push(checking)
                    }
                  },
                  onCancel: async () => {
                    params.isNewStudent = true
                    console.log(params)
                    await postSingleTrialApi(params)
                    this.packTrialList()
                    this.$vux.toast.text('操作成功', 'middle')
                  }
              })

            }
          },
          onCancel () {
          }
      })


    },
    // 批量操作按钮触发事件 （批量审核驳回统一）
    async batchClick (e) {
      let list = []
      for (let val of this.hookList) {
        list.push(val.id)
      }
      if (list.length == 0) {
        this.$vux.toast.text('请选择至少一个学生', 'middle')
        return
      }
      let params = {
        studentApprovalIds: list,
        status: e
      }
      this.$vux.confirm.show({
          title: '提示',
          content: '是否确定执行该批量操作？',
          onConfirm : async () => {
            let res = await postBatchTrialApi(params)

            await this.batchUploadFace(res.studentApprovalIds)

            this.packTrialList()
            this.checklistVal = []
            this.hookList = []
            this.conflictList = []
            this.$vux.toast.text(res.message, 'middle')
            console.log(res)
          },
          onCancel () {
          }
      })

    },
    // 点击详情触发事件
    detailsClick (e) {
      console.log(e)
      localStorage.dealingIndividuals = JSON.stringify(e)
      this.$router.push('toExamineDetails')
    },
    // 点击选项时触发
    listClick (e) {
      e.disabled ? this.$set(e, 'disabled', false) : this.$set(e, 'disabled', true)
      this.hookList = []
      for (let i of this.trialList) {
        if (i.disabled) {
          this.hookList.push(i)
        }
      }
      if (this.hookList.length == this.trialList.length) {
        this.checklistVal = ['全选']
      } else {
        this.checklistVal = []
      }
      // console.log(this.checklistVal)
    },
    // 点击全选时触发
    checklistChange () {
      if (this.checklistVal.length > 0) {
        this.checklistVal = []
        this.hookList = []
        for (let i of this.trialList) {
          this.$set(i, 'disabled', false)
        }
      } else {
        this.hookList = this.trialList
        this.checklistVal = ['全选']
        for (let i of this.trialList) {
          this.$set(i, 'disabled', true)
        }
      }
    },
    // 获取待审核学生请求封装
    async packTrialList () {
      let val = JSON.parse(localStorage.reviewClass)
      let params = {
        // LoginUserId: this.loginUserId,
        SchoolClassId: val.id,
        Status: 0,
        PageNum: 0,
        PageSize: 0,
        Sorting: 'createTime DESC'
      }
      this.trialList = await getTrialStudentApi(params)
      if (this.trialList.length == 0) {
        this.whetherData = true
      } else {
        this.whetherData = false
      }
      console.log(this.trialList)
    },
    // 获取字典请求封装
    async packrelationCode () {
      let params = {
        typeCode: 'FamilyRelation'
      }
      this.relativesArr = await getDictionariesApi(params)
      console.log(this.relativesArr)
    }
  },
  async mounted() {
    this.packrelationCode()
    this.packTrialList()
  }
}
</script>

<style lang="less" scoped >
.whetherCss {
  width: 100%;
  margin-top: 0.5rem;
  color: #ccc;
}

.popupCss {
  align-items: center;
  // justify-content: center;
  color: #666666;
  font-size: 0.32rem;
  button {
    width: 2.4rem;
    height: 0.75rem;
    background: #128FEF;
    color: #FFF;
    border-radius: 0.38rem;
    font-size: 0.32rem;
    border: 0;
    margin: 0.2rem 0 0.4rem 0;
  }
  .stripCss {
    width: 5.8rem;
    height: 2.65rem;
    background: #FFF;
    border-radius: 0.15rem;
    border: 1px solid #a8a7ac;
    margin: 0.1rem 0 0.2rem 0;
    color: #666666;
    font-size: 0.28rem;
    align-items: baseline;
    position: relative;
    span {
      margin-top: 0.2rem;
      margin-left: 0.2rem;
    }
    img {
      position: absolute;
      top: 0;
      right: 0;
      width: 0.96rem;
      height: 0.83rem;
    }
    .nameCss {
      font-size: 0.32rem;
      font-weight: 600;
      color: #000;
    }
  }
}

.borderCss {
  border: 1px solid #128FEF!important;
}

.bottomTab {
  width: 100%;
  height: 1rem;
  background: #FFF;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  border-top: 1px solid #C9C9C9;
  .buttonTab {
    background: #128FEF;
    margin-left: 0.2rem;
  }
  span {
    font-size: 0.32rem;
  }
  button {
    width: 1.9rem;
    height: 0.64rem;
    font-size: 0.28rem;
    border-radius: 0.32rem;
    background: #14cc8d;
    color: #FFF;
    margin-left: 0.6rem;
    border: 0;
  }
}

.rightDivCss {
  width: 1.8rem;
  height: 100%;
  align-items: center;
  .buttonCss {
    border: 1px solid #F72424;
    color: #F72424;
  }
  button {
    width: 1.26rem;
    height: 0.5rem;
    background: #FFF;
    color: #128FEF;
    border: 1px solid #128FEF;
    border-radius: 0.15rem;
    font-size: 0.26rem;
    margin-top: 0.3rem;
  }
  span {
    margin: 0.3rem 0 0 0.1rem;
    color: #949494;
  }
}

.middleDivCss {
  width: 3.7rem;
  height: 100%;
  margin-left: 0.2rem;
  font-size: 0.24rem;
  color: #949494;
  .nameCss {
    font-size: 0.32rem;
    font-weight: 600;
    margin: 0.3rem 0;
    color: #000;
  }
}

.headImgCss {
  width: 1rem;
  height: 100%;
  img {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0.2rem 0 0 0.2rem;
    border-radius: 2rem;
  }
}

.bigDivCss {
  width: 6.64rem;
  height: 2.58rem;
  background: #FFF;
  border-radius: 0.15rem;
  margin: 0.3rem 0 0 0.3rem;
  display: flex;
  .tickCss {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0.4rem;
  }
}

.disableCss {
  border: 0.01rem solid #128FEF;
  position: relative;
  width: 6.63rem!important;
  height: 2.57rem!important;
}


.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
.imgG .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
  color: #128FEF!important;
}

.xdialog .weui-dialog {
  padding: 0 0.4rem;
  width: 90%;
  max-width:370px;
}

.allCss .weui-cells:before {
  border-top: 0px!important;
}

.allCss .weui-cells:after {
  border-bottom: 0px!important;
}
</style>
